<script>
var list = [
    {
        'name': 'cron_import_sge_moni_deal_data.php',
        'desc': '猎金模拟交易大赛数据导入',
        'time': '5 19 * * *',
        'class': 1,
        'state': 2
    },
    {
        'name': 'cron_import_sge_moni_deal_data.php',
        'desc': '猎金模拟交易大赛数据更新',
        'time': '*/30 * * * *',
        'class': 1,
        'state': 2
    },
    {
        'name': 'cron_import_cbas_sge_account_logininfo.php',
        'desc': '猎金CRM导入客户APP登录信息数据',
        'time': '*/10 * * * *',
        'class': 1,
        'state': 1
    },
    {
        'name': 'cron_import_sge_account_tag_from_cbas_a.php',
        'desc': '猎金从CBAS导入客户标签数据',
        'time': '0 20 * * *',
        'class': 1,
        'state': 1
    },
    {
        'name': 'cron_update_sge_account_golden.php',
        'desc': '猎金客户出入金统计脚本',
        'time': '0 2 * * *',
        'class': 1,
        'state': 1
    }
]
import $ from 'jquery'
import ljmodal from '@/component/modal.vue'
export default {
    data: () => {
        return {
            orderk: 'name',
            ordert: -1,
            titles: {
                'desc': ['用途', 1],
                'name': ['名称', 1],
                'time': ['定时', 1],
                'class': ['分类', 1],
                'state': ['状态', 1]
            },
            states: { 1: '有效', 2: '无效', 3: '单次', 4: '未配置' },
            chosenKey: '',
            chosenData: new Object,
            all: new Array
        }
    },
    components: {
        ljmodal
    },
    mounted () {
        this.init()
    },
    computed: {
        list () {
            return this.$store.state.script
        }
    },
    methods: {
        init () {
            if (localStorage.getItem('script') == null) {
                var task = JSON.stringify(list)
                localStorage.setItem('script', task)
                this.$store.state.script = list
                alert("init complete")
            }
        },
        orderf: function(key) {

            this.orderk = key, this.ordert = this.ordert * -1
        },
        orderm: function(list) {
            var _this = this
            
            return list.map((item) => {

                return (typeof item !== 'object') ? item : Object.assign({}, item)
            }).sort(
                (rowa, rowb) => {
                    if (_this.orderk === null
                        || rowa[_this.orderk] === undefined
                        || rowa[_this.orderk] === undefined) {
                        
                        return 0
                    } else {

                        return (String(rowa[_this.orderk]) > String(rowb[_this.orderk]) ? 1 : -1) * _this.ordert
                    }
                }
            )
        },
        getclass: function(item) {
            return { 'table-success': item.state === 1, 'table-primary': item.state === 3, 'table-warning': item.state === 2 }
        },
        edit (key) {
            var list = this.orderm(this.list)
            this.all = list

            this.chosenKey = key
            this.chosenData = Object.assign(
                {},
                this.chosenData,
                list[key]
            )

            $('#edit').modal('show')
        }
    }
}
</script>

<template>
    <div style="margin: 20px auto; width: 1500px; font-size: 12px;">
        <table class="table table-hover table-bordered">
            <thead class="thead-dark">
                <tr>
                    <th>#</th>
                    <th v-for="(val, key) in titles" v-bind:key="key" v-on:click="orderf(key)" style="cursor: pointer;">{{ val[0] }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(val, key) in orderm(list)" v-bind:key="key" @dblclick="edit(key)">
                    <th scope="row" style="width: 40px;">{{ key + 1 }}</th>
                    <td>{{ val.desc }}</td>
                    <td>{{ val.name }}</td>
                    <td>{{ val.time }}</td>
                    <td>{{ val.class }}</td>
                    <td v-bind:class="getclass(val)">{{ states[val.state] }}</td>
                </tr>
            </tbody>
        </table>

        <ljmodal id="edit" :list="titles" index="script" :indexKey="chosenKey" :edit="chosenData" :all="all"></ljmodal>
    </div>
</template>
